<template>
  <div class="page">
    <!-- 装饰气泡 -->
    <div class="bubbles">
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
    </div>

    <div class="header">
      <p class="welcome">Hello!</p>
      <p class="sub-welcome">开启您的猫咪之旅</p>
    </div>

    <img src="@/assets/images/registCat.png" class="cat-image" alt="猫咪图片">

    <div class="register-container">
      <div class="register-content">
        <!-- 用户名 & 昵称行 -->
        <div class="form-row dual-inputs">
          <div class="input-group">
            <div class="input-wrapper">
              <input v-model="formData.username" type="text" placeholder="用户名" />
            </div>
          </div>
          <div class="input-group">
            <div class="input-wrapper">
              <input v-model="formData.nickname" type="text" placeholder="昵称" />
            </div>
          </div>
        </div>

        <!-- 邮箱 -->
        <div class="input-group">
          <div class="input-wrapper">
            <input v-model="formData.email" type="email" placeholder="邮箱" />
          </div>
        </div>

        <!-- 密码 -->
        <div class="input-group">
          <div class="input-wrapper">
            <input v-model="formData.password" type="password" placeholder="密码" />
          </div>
        </div>

        <!-- 确认密码 -->
        <div class="input-group">
          <div class="input-wrapper">
            <input v-model="formData.repassword" type="password" placeholder="重新输入密码" />
          </div>
        </div>

        <!-- 按钮组 -->
        <div class="button-group">
          <div class="signup-btn" @click="goSignUp">
            <span>注册</span>
          </div>
          <div class="signin-btn" @click="goSignin">
            <span>已有账号？登录</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({
  name: 'RegisterIndex'
});
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import { getUserRegist } from "./api/login";
const router = useRouter();

const formData = reactive({
  username: '',
  nickname: '',
  email: '',
  password: '',
  repassword: ''
});

// 用户名正则：4-16位字母、数字、下划线
const usernameRegex = /^[a-zA-Z0-9_]{5,16}$/;
// 密码正则：6-16位字母、数字、特殊字符
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,16}$/;
// 邮箱正则：
const emailRegex = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/;

const validateForm = () => {
  if (!usernameRegex.test(formData.username)) {
    showToast('用户名必须是5-16位字母、数字或下划线');
    return false;
  }
  if (!passwordRegex.test(formData.password)) {
    showToast('密码必须是8-16位，包含大小写字母和数字');
    return false;
  }
  if (formData.password !== formData.repassword) {
    showToast('两次输入的密码不一致');
    return false;
  }
  if (!emailRegex.test(formData.email)) {
    showToast('请输入有效的邮箱地址');
    return false;
  }
  return true;
};

const goSignin = () => {
  router.push('/login');
};

const goSignUp = async () => {
  if (!validateForm()) return;

  // 调用注册接口
  getUserRegist({
    username: formData.username,
    nickname: formData.nickname,
    email: formData.email,
    password: formData.password,
    repassword: formData.repassword
  }).then((res) => {
    if (res.data.code === 200) {
      showToast('注册成功');
      router.push('/login');
    } else {
      showToast('注册失败，请重试');
    }
  })
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(135deg, #8B5CF6, #6366F1);
  position: relative;
  overflow: hidden;
}

// 气泡装饰
.bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.bubble {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border-radius: 50%;

  &:nth-child(1) {
    width: 60px;
    height: 60px;
    top: 20%;
    left: 10%;
    animation: float 6s ease-in-out infinite;
  }

  &:nth-child(2) {
    width: 40px;
    height: 40px;
    top: 15%;
    right: 20%;
    animation: float 8s ease-in-out infinite;
  }

  &:nth-child(3) {
    width: 30px;
    height: 30px;
    top: 35%;
    left: 30%;
    animation: float 7s ease-in-out infinite;
  }

  &:nth-child(4) {
    width: 50px;
    height: 50px;
    top: 25%;
    right: 35%;
    animation: float 5s ease-in-out infinite;
  }

  &:nth-child(5) {
    width: 35px;
    height: 35px;
    top: 40%;
    right: 15%;
    animation: float 9s ease-in-out infinite;
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-20px) scale(1.05);
  }
}

.header {
  padding: 40px 30px;
  color: #fff;
  position: relative;
  z-index: 2;

  .welcome {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    padding: 15px 25px;
    border-radius: 20px;
    display: inline-block;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      left: 20px;
      bottom: -8px;
      width: 20px;
      height: 20px;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(5px);
      transform: rotate(45deg);
      z-index: -1;
    }
  }

  .sub-welcome {
    font-size: 16px;
    opacity: 0.8;
    margin-left: 25px;
    margin-top: 15px;
  }
}

.cat-image {
  position: absolute;
  right: 10px;
  top: 50px;
  width: 160px;
  height: auto;
  transform: rotate(5deg);
  z-index: 2;
}

.register-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 65vh;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 30px 30px 0 0;
  padding: 30px;
}

.register-content {
  max-width: 340px;
  margin: 0 auto;
  padding-top: 20px;

  .form-row {
    margin-bottom: 20px;

    &.dual-inputs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
    }
  }

  .input-group {
    .input-wrapper {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid rgba(99, 102, 241, 0.2);
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      margin-bottom: 5px;

      &:focus-within {
        border-color: #8B5CF6;
        box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15);
        transform: translateY(-2px);
      }

      input {
        width: 100%;
        height: 52px;
        border: none;
        background: transparent;
        padding: 0 20px;
        font-size: 15px;
        color: #333;
        outline: none;

        &::placeholder {
          color: #999;
        }
      }
    }
  }

  .button-group {
    margin-top: 40px;

    .signup-btn,
    .signin-btn {
      width: 100%;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      font-weight: 500;

      span {
        font-size: 16px;
      }

      &:active {
        transform: scale(0.98);
      }
    }

    .signup-btn {
      background: linear-gradient(135deg, #8B5CF6, #6366F1);
      color: white;
      margin-bottom: 15px;
      box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);

      &:hover {
        box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
      }
    }

    .signin-btn {
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(139, 92, 246, 0.3);
      color: #6366F1;

      &:hover {
        background: rgba(255, 255, 255, 0.95);
        border-color: #8B5CF6;
      }
    }
  }
}
</style>